<app-header [sticky]="true" [transparent]="true">
	<div header-title>
		Playlists
	</div>
	<div header-actions class="actions">

		<div (click)="onCreate()" appRipple class="action">
			<i class="ph-plus"></i>

		</div>
	</div>
</app-header>

<div class="playlists">
	<div class="playlist" *ngFor="let playlist of playlists">
		<div appRipple (click)="onPlaylist(playlist._id)" class="playlist-name">
			{{ playlist.name }}
			<div><small>({{ playlist.tracks.length || 0}} Tracks)</small></div>
		</div>
		<div class="m-r-20">{{ playlist.created_at | date: 'MMM dd, yyyy' }}</div>
	</div>
</div>